<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			div {
				position: absolute;
			}

			li {
				border-radius: 50%;
				background-color: burlywood;
				border: powderblue 3px solid;
				list-style: none;
				display: inline-block;
				position: relative;
				width: 10px;
				height: 10px;
				left: 150px;
				top: 250px;
			}

			li:hover {
				background-color: red;
			}
		</style>
		<script src="../day8/jquery-3.4.1.min.js"></script>
		<script>
			 $(function(){
				 var index=1;
				 var timer;
				 function timeStart(){
					 timer=window.setInterval(function(){
					 					 index++;
					 					 index=index>5?1:index;
					 					 $("#AA").attr("src","img/"+index+".jpg");
					 					 $("ul#nav li:eq("+(index-1)+")").css({"background-color":"red"});
					 					 $("ul#nav li:not(:eq("+(index-1)+"))").css({"background-color":"burlywood"});
					 					 
					 },1500);
				 }	
				 timeStart();
				 
				 $("ul#nav li,#div1 img").mouseover(function(event){
					 window.clearInterval(timer);
					 var ind=$(this).index();
					 
					 if(event.target.nodeName=="LI"){
						 index=ind+1;
					 }
					     
					 $("#AA").attr("src","img/"+index+".jpg");
					 $("ul#nav li:eq("+(index-1)+")").css({"background-color":"red"});
					 $("ul#nav li:not(:eq("+(index-1)+"))").css({"background-color":"burlywood"});
					 
				 }).mouseout(function(){
					 timeStart();
				 });
			 });
		</script>
	</head>
	<body>
		<div id="div1" onclick="close1()">
			<img src="img/1.jpg" id="AA" >
		</div>
		<ul id="nav">
			<li id="A" style="background-color:red;" ></li>
			<li id="B"></li>
			<li id="C" ></li>
			<li id="D" ></li>
			<li id="E" ></li>
		</ul>
	</body>
</html>